
<template>
  <t-prompt
    ref="prompt"
    key="customer"
    spec="4"
    :prompt-title="formData&&formData.id?'编辑客户':'新增客户'"
    :append-to-body="true"
    @submitBtn="submitCustomerBtn"
  >
    <div v-loading="loading">
      <el-form ref="customerForm" v-model="formData" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户名称:">
              <el-input v-model="formData.name" placeholder="请输入客户名" class="el-form-item-content" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="客户代码:">
              <el-input v-model="formData.code" placeholder="请输入客户代码" class="el-form-item-content" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="联系人:">
              <el-input v-model="formData.contact" placeholder="请输入联系人" class="el-form-item-content" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="联系电话:">
              <el-input v-model="formData.contactTel" placeholder="请输入联系电话" class="el-form-item-content" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="省市区:">
              <el-cascader
                v-model="formData.addressCode"
                style="width:260px"
                :options="options"
                placeholder="请输入具体地址"
                :props="{
                  'label':'name',
                  'value':'code'
                }"
                @change="handleChange"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="具体地址:">
              <el-input v-model="formData.address" placeholder="请输入具体地址" class="el-form-item-content" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="法人:">
              <el-input v-model="formData.legalPerson" placeholder="请输入法人" class="el-form-item-content" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="法人手机号:">
              <el-input v-model="formData.legalTel" placeholder="请输入法人手机号" class="el-form-item-content" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="身份证正面照:">
              <el-upload
                ref="uploadRef"
                :show-file-list="false"
                :http-request="fileUploadPositive"
                :multiple="false"
                action="#"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="formData.idCardPositive" :src="jointURL(formData.idCardPositive)" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="身份证反面照:">
              <el-upload
                ref="uploadRef"
                :show-file-list="false"
                :http-request="fileUpload"
                :multiple="false"
                action="#"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="formData.idCardBack" :src="jointURL(formData.idCardBack)" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="营业执照:">
              <el-upload
                ref="uploadRef"
                :show-file-list="false"
                :http-request="fileUploadBusinessLicense"
                :multiple="false"
                action="#"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="formData.license" :src="jointURL(formData.license)" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="线路:">
              <el-select v-model="formData.lineId" placeholder="请选择路线" class="el-form-item-content">
                <el-option
                  v-for="item in pathList"
                  :key="item.id + 'lineId'"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="身份证号:">
              <el-input v-model="formData.idCard" placeholder="请输入身份证号" class="el-form-item-content" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="身份证号有效期:">
              <el-input v-model="formData.idCardPeriod" placeholder="请输入身份证号有效期" class="el-form-item-content" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="税号:">
              <el-input v-model="formData.taxNumber" placeholder="请输入税号" class="el-form-item-content" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="法人姓名:">
              <el-input v-model="formData.legalPerson" placeholder="请输入法人姓名" class="el-form-item-content" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="营业执照有效期:">
              <el-input v-model="formData.licensePeriod" placeholder="请输入营业执照有效期" class="el-form-item-content" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="门店名称:">
              <el-input v-model="formData.unitName" placeholder="请输入门店名称" class="el-form-item-content" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="产品模板:">
              <el-select v-model="formData.productModuleId" placeholder="请选择产品模板" class="el-form-item-content">
                <el-option
                  v-for="item in templateList"
                  :key="item.id + 'product'"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="取片方式:">
              <el-select v-model="formData.pickMethod" placeholder="请取片方式" class="el-form-item-content">
                <el-option
                  v-for="item in pickMethodList"
                  :key="item.id + 'product'"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>

            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">

            <el-form-item label="余额:">
              <el-input-number
                v-model="formData.surplus"
                placeholder="请输入余额"
                class="el-form-item-content"
                auto-complete="off"
                :precision="2"
                :controls="false"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="付款方式:">
              <el-select v-model="formData.payType" placeholder="请付款方式" class="el-form-item-content">
                <el-option
                  v-for="item in payTypeList"
                  :key="item.id + 'product'"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="备注:">
          <el-input
            v-model="formData.remark"
            type="textarea"
            :rows="2"
            placeholder="请输入法人手机号"
            style="width:300px"
          />
        </el-form-item>

      </el-form>
    </div>
  </t-prompt>
</template>

<script>
import TPrompt from '@/components/TPrompt/index.vue'
import ocrApi from '@/api/ocr'
import pathApi from '@/api/path'
import area from '@/utils/area.json'
import { validatePhone } from '@/utils/validate'
import { usersByRole, priceTemplate } from '@/api/customer'
export default {
  name: 'CustomerDetails',
  components: {
    TPrompt
  },
  props: {
    data: { type: Object, default: () => {
      return null
    } }
  },
  data() {
    return {
      options: area,
      loading: false,
      rules: {
        legalTel: [{ required: false, trigger: 'blur', validator: (rule, value, callback) => {
          if (value) {
            if (!validatePhone(value)) {
              callback(new Error('请输入正确手机号'))
            }
            callback()
          }
          callback()
        } }]
      },
      formData: {
        address: null,
        cityId: null,
        code: null,
        contact: null,
        contactTel: null,
        id: null,
        idCard: null,
        idCardBack: null,
        idCardPeriod: null,
        idCardPositive: null,
        legalPerson: null,
        legalTel: null,
        license: null,
        licensePeriod: null,
        lineId: null,
        name: null,
        payType: null,
        pickMethod: null,
        productModuleId: null,
        provinceId: null,
        regionId: null,
        remark: null,
        surplus: null,
        taxNumber: null,
        unitName: null
      },
      templateList: [],
      pickMethodList: [
        {
          name: '快递',
          id: 1
        },
        {
          name: '上门取件',
          id: 2
        }
      ],
      payTypeList: [
        {
          name: '现付',
          id: 1
        },
        {
          name: '月结',
          id: 2
        },
        {
          name: '季度结',
          id: 3
        }
      ],
      pathList: []
    }
  },
  watch: {
    data(val) {
      this.formData = val || {
        address: null,
        cityId: null,
        code: null,
        contact: null,
        contactTel: null,
        id: null,
        idCard: null,
        idCardBack: null,
        idCardPeriod: null,
        idCardPositive: null,
        legalPerson: null,
        legalTel: null,
        license: null,
        licensePeriod: null,
        lineId: null,
        name: null,
        payType: null,
        pickMethod: null,
        productModuleId: null,
        provinceId: null,
        regionId: null,
        remark: null,
        surplus: null,
        taxNumber: null,
        unitName: null
      }
    }
  },
  mounted() {
    if (this.data) {
      this.formData = this.data
    }
    this.getUsersByRole()
    this.getPriceTemplate()
    this.lineList()
  },
  methods: {
    openDiglog() {
      this.$nextTick(() => {
        console.log('this.$refs.customerForm---->', this.formData)

        this.$refs.prompt.openDiglog()
        this.$refs.customerForm.resetFields()
      })
    },
    lineList() {
      pathApi.lineList().then((res) => {
        this.pathList = res.data
      })
    },
    submitCustomerBtn() {
      // let flg
      // this.$refs.customerForm.validate((valid) => {
      //   flg = valid
      // })
      // console.log('this.formData----xxx--->', this.formData)
      // if (flg) {
      //   return this.formData
      // } else {
      //   return null
      // }
      this.$emit('callBack', this.formData)
    },
    jointURL(url) {
      return process.env.VUE_APP_BASE_API + url
    },
    getUsersByRole() {
      usersByRole(4).then((res) => {
        const roleList = res.data
        this.roleList = roleList
      })
    },
    getPriceTemplate() {
      priceTemplate().then((res) => {
        const templateList = res.data
        this.templateList = templateList
      })
    },
    handleChange(code) {
      this.formData.provinceId = code[0]
      this.formData.cityId = code[1]
      this.formData.regionId = code[2]
    },
    fileUpload(file) {
      const fileInfo = file.file
      const formData = new FormData()
      formData.append('file', fileInfo)
      formData.append('idCardSide', 'back')
      this.loading = true
      ocrApi.ocrIdCard(formData).then((res) => {
        const data = res.data
        this.loading = false
        this.formData.idCardBack = data.url
        this.formData.idCardPeriod = data.t.idCardPeriod
      }).catch(() => {
        this.loading = false
      })
    },
    // 身份证正面照
    fileUploadPositive(file) {
      const fileInfo = file.file
      const formData = new FormData()
      formData.append('file', fileInfo)
      formData.append('idCardSide', 'front')
      this.loading = true
      ocrApi.ocrIdCard(formData).then((res) => {
        const data = res.data
        this.loading = false
        this.formData.idCardPositive = data.url
        this.formData.name = data.t.name
        this.formData.idCard = data.t.number
      }).catch(() => {
        this.loading = false
      })
    },
    // 营业执照
    fileUploadBusinessLicense(file) {
      const fileInfo = file.file
      const formData = new FormData()
      formData.append('file', fileInfo)
      this.loading = true
      ocrApi.ocrBusiness(formData).then((res) => {
        const data = res.data
        this.loading = false
        this.formData.license = data.url
        this.formData.taxNumber = data.t.code
        this.formData.legalPerson = data.t.legal
        this.formData.licensePeriod = data.t.period
        this.formData.unitName = data.t.unitName
      }).catch(() => {
        this.loading = false
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是JPEG/PNG/JPG格式!')
      }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!')
      // }
      return isJPG && isLt2M
    },
    handleInput(e) {
      e.target.value = (e.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item-content {
  width: 260px;
}
 .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border: 1px solid #d9d9d9;
  }
  .avatar {
      width: 80px;
    height: 80px;
  }
  ::v-deep .el-input__inner {
    text-align: left;
  }
</style>
